<template>
	<view>
		<view class="mh-form">
			<view class="mh-form-title">
				<view class="mh-form-title-left">
					<view class="mh-form-title-color"></view>
					<view class="mh-form-title-txt">维修安装单</view>
				</view>
				<view class="mh-form-title-right" @click="toDeviceInfo()">
					基本信息 >
				</view>
			</view>
			<view class="mh-form-card">
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-224">
						损坏性质：
					</view>
					<view>{{showName(damageNatureList, detailInfo.damageNature)}}</view>
				</view>
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-224">
						维修性质：
					</view>
					<view>{{showName(repairNatureList, detailInfo.repairNature)}}</view>
				</view>
				<view class="mh-form-item-textarea border">
					<view class="mh-form-item-label width-224">
						维修安装内容：
					</view>
					<view>{{detailInfo.repairInstallContent }}</view>
				</view>
				<view class="mh-form-item-textarea border">
					<view class="mh-form-item-label width-224">
						维修安装结果：
					</view>
					<view>{{detailInfo.repairInstallResult}}</view>
				</view>
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-224">
						维修安装工时：
					</view>
					<view>{{detailInfo.workHours}}</view>
				</view>
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-224">
						是否更换元件：
					</view>
					<u-radio-group v-model="detailInfo.componentReplacementFlag" disabled>
						<u-radio :name="1">是</u-radio>
						<u-radio :name="0">否</u-radio>
					</u-radio-group>
				</view>
				<view class="mh-form-item-textarea border" v-if="detailInfo.componentReplacementFlag == 1">
					<view class="mh-form-item-label width-224">
						更换元器件：
					</view>
					<u-input :value="detailInfo.replacedComponent" type="textarea" placeholder="" disabled></u-input>
				</view>
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-224">
						是否完成：
					</view>
					<u-radio-group v-model="detailInfo.completionFlag" disabled>
						<u-radio :name="1">是</u-radio>
						<u-radio :name="0">否</u-radio>
					</u-radio-group>
				</view>
				<view class="mh-form-item-textarea" v-if="detailInfo.completionFlag == 0">
					<view class="mh-form-item-label width-224">
						维修、安装进度：
					</view>
					<u-input :value="detailInfo.progress" type="textarea" placeholder="" disabled></u-input>
				</view>
			</view>

			<view class="mh-form-card" v-if="detailInfo.completionFlag == 1">
				<view class="mh-form-item-textarea border">
					<view class="mh-form-item-label width-224">
						验收情况：
					</view>
					<u-input :value="detailInfo.postRepairAcceptance" type="textarea" placeholder="" disabled></u-input>
				</view>
				<view class="mh-form-item-textarea border"
					@click="$common.previewImg(detailInfo.acceptanceSignatureList.map(item=>item.previewUrl), 0)">
					<view class="mh-form-item-label width-224">
						签收人签字：
					</view>
					<u-image :src="detailInfo.acceptanceSignatureList[0].previewUrl" width="120rpx"
						height="120rpx"></u-image>
				</view>
				<view class="mh-form-item-textarea"
					@click="$common.previewImg(detailInfo.departmentHeadSignatureList.map(item=>item.previewUrl), 0)">
					<view class="mh-form-item-label width-224">
						部门负责人签字：
					</view>
					<u-image :src="detailInfo.departmentHeadSignatureList[0].previewUrl" width="120rpx"
						height="120rpx"></u-image>
				</view>
			</view>

			<!-- <view class="mh-form-card" v-if="detailInfo.followUp24hrs">
				<view class="mh-form-item-textarea border">
					<view class="mh-form-item-label width-271">
						24小时内回访情况：
					</view>
					<u-input :value="detailInfo.followUp24hrs" type="textarea" placeholder="" disabled></u-input>
				</view>
				<view class="mh-form-item-textarea"
					@click="$common.previewImg(detailInfo.followUpSignatureList.map(item=>item.previewUrl), 0)">
					<view class="mh-form-item-label width-271">
						回访员签字：
					</view>
					<u-image :src="detailInfo.followUpSignatureList[0].previewUrl" width="120rpx"
						height="120rpx"></u-image>
				</view>
			</view> -->



			<view class="mh-form-card">
				<view class="mh-form-item-upload">
					<view class="mh-form-item-label width-224">
						维修前照片：
					</view>
					<view class="mh-form-item-upload-box">
						<view class="mh-form-item-upload-box-item" v-for="(item, index) in detailInfo.imagesList"
							:key="index"
							@click="$common.previewImg(detailInfo.imagesList.map(item=>item.previewUrl), index)">
							<u-image :src="item.previewUrl" width="150rpx" height="150rpx"></u-image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="mh-form-card">
				<view class="mh-form-item-upload">
					<view class="mh-form-item-label width-224">
						维修后照片：
					</view>
					<view class="mh-form-item-upload-box">
						<view class="mh-form-item-upload-box-item" v-for="(item, index) in detailInfo.imagesList1"
							:key="index"
							@click="$common.previewImg(detailInfo.imagesList1.map(item=>item.previewUrl), index)">
							<u-image :src="item.previewUrl" width="150rpx" height="150rpx"></u-image>
						</view>
					</view>
				</view>
			</view>

			<view class="mh-form-card" v-if="detailInfo.completionFlag == 1">
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-196">
						负责人：
					</view>
					<view> {{detailInfo.responsiblePersonStr}}</view>
				</view>
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-196">
						维修安装人：
					</view>
					<view> {{detailInfo.repairInstallPersonStr}}</view>
				</view>
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-196">
						维修安装时间：
					</view>
					<view> {{detailInfo.repairInstallTime}}</view>
				</view>
				<!-- <view class="mh-form-item border" v-if="detailInfo.followUpPerson">
					<view class="mh-form-item-label width-196">
						回访人：
					</view>
					<view> {{detailInfo.followUpPerson}}</view>
				</view>
				<view class="mh-form-item" v-if="detailInfo.followUpTime">
					<view class="mh-form-item-label width-196">
						回访时间：
					</view>
					<view> {{detailInfo.followUpTime}}</view>
				</view> -->
			</view>

			<!-- <view class="mh-form-card" v-if="detailInfo.state == 2">
				<view class="mh-form-item-textarea border">
					<view class="mh-form-item-label width-271">
						24小时内回访情况：
					</view>
					<u-input v-model="followUp24hrs" type="textarea" placeholder="请输入"></u-input>
				</view>
				<view class="mh-form-item-select" @click="openFollowUpSignature()">
					<view class="mh-form-item-label width-271">
						回访员签字：
					</view>
					<view v-if="followUpSignatureList.length > 0"
						@click.stop="$common.previewImg(followUpSignatureList.map(item=>item.previewUrl), 0)">
						<u-image :src="followUpSignatureList[0].previewUrl" width="150rpx" height="150rpx"
							@click=""></u-image>
					</view>
					<u-icon name="arrow-right" size="24" color="#999999"></u-icon>
				</view>
			</view>
			<view class="" style="padding: 80rpx 0;" v-if="detailInfo.state == 2">
				<u-button type="primary" @click="repairFollow()">完成回访</u-button>
			</view> -->

			<sign ref="followUpSignatureRef" @sign-data="followUpData"></sign>
		</view>
	</view>
	</view>
</template>

<script>
	import sign from '@/components/sign.vue'
	import {
		baseUrl
	} from '@/common/url'
	export default {
		components: {
			sign,
		},
		data() {
			return {
				action: baseUrl + '/attachment/upload',
				header: {},
				detailInfo: {},
				followUp24hrs: '',
				followUpSignatureList: [],
				damageNatureList: [],
				repairNatureList: [],
			}
		},
		onLoad(option) {
			let token = uni.getStorageSync('token')
			// let tokenName = uni.getStorageSync('tokenName')
			this.header['yrt'] = token
			this.getInfo(option.id)
			this.getDict()
		},
		computed: {
			showName() {
				return (list, value) => {
					if (list.length > 0 && value) {
						return list.find(item => item.id == value).name
					} else {
						return ''
					}
				}
			}
		},
		methods: {
			getDict() {
				this.$u.api.dictDamage().then(res => {
					this.damageNatureList = res
				})
				this.$u.api.dictRepair().then(res => {
					this.repairNatureList = res
				})
			},
			getInfo(id) {
				this.$u.api.repairGetOne({
					id
				}).then(res => {
					console.log(res);
					res.imagesList = !res.files ? [] : res.files.filter(item => item.bizType == 'preRepairImage') || []
					res.imagesList1 = !res.files ? [] : res.files.filter(item => item.bizType == 'postRepairImage') || []
					res.acceptanceSignatureList = !res.files ? [] : res.files.filter(item => item.bizType ==
						'acceptanceSignature') || []
					res.departmentHeadSignatureList = !res.files ? [] : res.files.filter(item => item
						.bizType == 'departmentHeadSignature') || []
					res.followUpSignatureList = !res.files ? [] : res.files.filter(item => item
						.bizType == 'followUpSignature') || []
					this.detailInfo = res
				})
			},
			openFollowUpSignature() {
				this.$refs.followUpSignatureRef.open()
			},
			async followUpData(filePath) {
				let list = await this.$common.uploadFile([{
					path: filePath
				}])
				this.$set(this, 'followUpSignatureList', [{
					fileName: list[0].fileName,
					fileMbSize: list[0].fileMbSize,
					fileByteSize: list[0].fileByteSize,
					previewUrl: list[0].previewUrl,
					bizType: 'followUpSignature'
				}])
			},
			repairFollow() {
				this.$u.api.repairFollow({
					id: this.detailInfo.id,
					followUp24hrs: this.followUp24hrs,
					files: this.followUpSignatureList
				}).then(res => {
					this.$u.toast('提交成功!')
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			},
			toDeviceInfo() {
				uni.navigateTo({
					url: '/pages/home/deviceInfo?equipmentId=' + this.detailInfo.equipmentId
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F5F7FA;
	}
</style>
<style lang="scss" scoped>
	.nav-right {
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 45rpx;
		margin-right: 45rpx;
	}
</style>